<!-- =========================================================================================
   地图首页
========================================================================================== -->

<template>
  <vx-card class="indexHome">
    <div class="content">
      <div id="container" class="map_box"></div>
      <div class="search_box">
        <el-input placeholder="请输入桥梁名称" v-model="search" clearable>
          <i class="el-icon-search el-input__icon" slot="suffix"></i>
        </el-input>
        <!-- 数据列表组件 -->
        <infoList
          @setCenter="setCenter"
          v-if="searchList.length > 0"
          :dataList="searchList"
        ></infoList>
      </div>

      <!-- 图层切换 -->
      <div class="views">
        <!-- 统计 -->
        <div class="all" @click="active = 1">
          <img
            src="../../assets/images/home/icon_all.png"
            v-if="active != 1"
            alt=""
          />
          <img
            src="../../assets/images/home/icon_all_sel.png"
            v-if="active == 1"
            alt=""
          />
          <span :class="active == 1 ? 'active' : ''">统计</span>
        </div>
        <div class="all allright" @click="active = 2">
          <img src="../../assets/images/home/icon_jk.png" alt="" />
          <span :class="active == 2 ? 'active' : ''">监控</span>
        </div>

        <!-- 卫星 -->
        <div class="allType">
          <img src="../../assets/images/home/icon_weixin.png" alt="" />
          <span v-if="viewer == 0">卫星图</span>
          <span v-if="viewer == 1">2D图</span>
        </div>
        
      </div>

      <!-- 统计图表 -->
      <div class="allCharts" v-show="active == 1">
        <p class="title">
          <img src="../../assets/images/home/icon_all_sel.png" alt="" />
          <span>统计</span>
          <i @click="active = 0" class="close el-icon-close"></i>
        </p>

        <el-row style="margin-top: 15px">
          <el-button round :type="tab == 0 ? 'primary' : ''" @click="tab = 0"
            >桥梁统计</el-button
          >
          <el-button round :type="tab == 1 ? 'primary' : ''" @click="tab = 1"
            >养护评定</el-button
          >
          <el-button round :type="tab == 2 ? 'primary' : ''" @click="tab = 2"
            >病害统计</el-button
          >
        </el-row>

        <div class="container-charts">
          <statistics v-show="tab == 0"></statistics>
          <assess v-show="tab == 1"></assess>
          <disease v-show="tab == 2"></disease>
        </div>
      </div>

      <!-- 监控 -->
      <div class="allCharts" v-show="active == 2">
        <p class="title">
          <img src="../../assets/images/home/icon_all_sel.png" alt="" />
          <span>监控</span>
          <i @click="active = 0" class="close el-icon-close"></i>
        </p>

        <!-- 请选择桥梁 -->
        <div class="selectBridge">
          <el-select v-model="value" placeholder="请选择桥梁">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <div v-if="unshow" id="id_test_video" style="width: 100%; height: auto"></div>
        </div>
      </div>
    </div>
  </vx-card>
</template>

<script>
import infoList from "./components/infoList";
import statistics from "./components/all/statistics"; // 桥梁统计
import assess from "./components/all/assess"; // 养护评定
import disease from "./components/all/disease"; // 病害统计
export default {
  data() {
    return {
      unshow: true,
      search: "",
      viewer: 0,
      tab: 0,
      active: 0,
      mapLlist: [],
      searchList: [],
      markerAll: [],
      icon: require("../../assets/images/icon/s.png"),
      source:
        "https://hls01open.ys7.com/openlive/0dbe7fada6334f709d1bbe97f89dbc35.m3u8",

      options: [
       
      ],
      value: "",
      player:""
    };
  },
  components: {
    infoList,
    statistics,
    assess,
    disease
  },
  mounted() {
    this.initMap(0);
    this.getBridgeAll();

    this.player = new TcPlayer("id_test_video", {
      m3u8:
        "https://hls01open.ys7.com/openlive/0dbe7fada6334f709d1bbe97f89dbc35.m3u8", //请替换成实际可用的播放地址
      autoplay: false, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
      // poster: "http://www.test.com/myimage.jpg",
      width: "311", //视频的显示宽度，请尽量使用视频分辨率宽度
      height: "255", //视频的显示高度，请尽量使用视频分辨率高度
      controls: false,
      // live: true,
      x5_fullscreen: true
    });
  },
  methods: {

    // 高德地图初始化
    initMap(i, center) {
      this.viewer = i;
      this.map = new AMap.Map("container", {
        center: center,
        zoom: 12.5,
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        pitch: 62,
        // rotation: -15,
        viewMode: "3D", //开启3D视图,默认为关闭
        mapStyle: "amap://styles/931e2a11d9bb3ef52bb51ccaeb95fad9", //设置地图的显示样式
      });

      this.map.plugin(["AMap.MapType"], () => {
        //地图类型切换
        var type = new AMap.MapType({
          defaultType: i, //使用2D地图
          // showTraffic: true,
          // showRoad: true,
        });
        this.map.addControl(type);
      });

      //        this.map.plugin(["AMap.ControlBar"],()=>{
      //     var controlBar = new AMap.ControlBar({
      //       position:{
      //         bottom:"-100px",
      //         right:"10px"
      //       }
      //     })
      //     this.map.addControl(controlBar)
      // });
      // this.getBridgeAll();
    },

    // 获取所有桥梁
    getBridgeAll() {
      this.$api.mearsuringPointSetting.getBridgeAll().then((res) => {
        console.log("所有桥梁", res.data.data);
        this.mapList = res.data.data[0];
        this.searchList = res.data.data[0];
        this.options = res.data.data[0]
        this.value = this.options[0].id

        // 初始化地图
        this.initMap(0, [this.mapList[0].lng, this.mapList[0].lat]);

        // 初始化地图上的点
        this.mapList.map((item, key) => {
          this.markerAll.push(
            this.initMarker(item.lng, item.lat, this.icon, item.name)
          );
        });
        this.map.add(this.markerAll);
      });
    },

    // 初始化 marker 点
    /**
     * lng : 经度
     * lat : 纬度
     * icon : 图标
     * content : 点名称
     * info : 自定义信息
     */
    initMarker(lng, lat, icon, content, info) {
      var marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat),
        offset: new AMap.Pixel(-10, -10),
        icon: icon, // 添加 Icon 图标 URL
        label: {
          content: content,
          direction: "bottom",
        },
        data: info,
        anchor: "top-center",
      });
      marker.on("click",()=>{
        this.$router.push("/bridgeInformation/bridgeManagement")
      })
      // marker.data = info;
      // marker.on("click", e => {
      //   this.popupActivo = true;
      //   console.log("点击事件", e.target.data);
      //   let data = e.target.data;
      //   this.obj = {
      //     id: data.id,
      //     picId: data.picId,
      //     name: data.name,
      //     builtArea: data.builtArea,
      //     startDate: data.startDate,
      //     engineeringCost: data.engineeringCost,
      //     endDate: data.endDate,
      //     contractDuration: data.contractDuration,
      //     lng: data.lng,
      //     lat: data.lat,
      //     builder: data.builder,
      //     builderMgr: data.builderMgr,
      //     describe: data.describe
      //   };
      // });
      return marker;
    },

    // setZoom
    setCenter(lng, lat) {
      this.map.setCenter([lng, lat]); //设置地图中心点
    },
  },
  watch: {
    search: {
      handler: function (val) {
        if (val) {
          console.log(val);
          let arr = [];
          this.mapList.map((item, key) => {
            if (item.name.indexOf(val) >= 0) {
              arr.push(item);
            }
          });
          console.log("didiid", arr);
          this.searchList = arr;
        } else {
          this.getBridgeAll();
        }
      },
    }

    
  },
};
</script>

<style lang="scss" scoped>
/deep/.vx-card__body {
  width: 100%;
  height: 100%;
  padding: 0 !important;
}
.content {
  position: relative;

  .map_box {
    width: 100%;
    height: 100vh;
    background: white;
    // margin-top: 20px;
  }
  .search_box {
    width: 280px;
    // height: 364px;
    // background: white;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  /deep/.el-input__inner {
    border-radius: 0px;
    // margin-bottom: 4px;
  }
  /deep/.el-input__icon {
    font-size: 18px;
  }
}
.indexHome {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 62px;
  left: 0;
  z-index: 51000 !important;
}
/deep/.amap-maptype-win {
  background: transparent !important;
  border: none !important;
  img {
    display: none !important;
  }
}
/deep/.amap-maptype-con {
  width: 30px !important;
  height: 30px !important;
  border: none !important;
  background-color: transparent !important;
  img {
    width: 100% !important;
    height: 100% !important;
  }
}
/deep/.amap-maptype-title:hover {
  background-color: #fff !important;
  color: #327bdc !important;
}
/deep/.amap-maptype-title {
  position: absolute !important;
  bottom: -8px !important;
  left: -46px !important;
  color: #858899 !important;
  font-size: 14px !important;
}
/deep/.amap-maptype-list {
  display: none !important;
}
.views {
  position: fixed;
  right: 10px;
  top: 80px;
  height: 42px;
  display: flex;
  justify-content: start;
  line-height: 42px;
  // background: #FFF;
  .all {
    cursor: pointer;
    width: 101px;
    height: 100%;
    background: #fff;
    // text-align: center;
    padding-left: 5px;
    color: #858899;
    img {
      display: inline;
      vertical-align: middle;
    }
  }
  .all:hover {
    color: #327bdc;
  }
  .allright {
    margin-right: 10px;
    padding-right: 20px;
  }
  .allType {
    cursor: pointer;
    width: 120px;
    height: 100%;
    background: #fff;
    color: #fff;
    // text-align: center;
    padding: 0 15px;
    img {
      display: inline;
      vertical-align: middle;
    }
  }
  .allType:hover {
    color: #327bdc;
  }
}
.allCharts {
  position: fixed;
  right: 10px;
  top: 140px;
  background: #fff;
  width: 332px;
  height: auto;
  // min-height: 400px;
  max-height: calc(100vh - 170px);
  padding: 0 10px;
  .title {
    width: 100%;
    border-bottom: 1px solid #eaebec;
    line-height: 40px;
    color: #4a8be0;
    img {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -2px;
      left: -5px;
    }
    span {
      position: relative;
      left: -3px;
    }
  }
}
.close {
  float: right;
  margin-top: 14px;
  cursor: pointer;
}
.container-charts {
  width: 100%;
  max-height: calc(100vh - 270px);
  overflow-x: hidden;
}
.active {
  color: #409eff;
}
.selectBridge {
  margin-top: 20px;
}
#id_test_video{
  margin-top: 20px;
}
</style>

